<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>作业</title>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<style type="text/css">
			.border {
				border: 2px solid black;
			}
			
			.top {
				height: 60px;
			}
			
			.top>div {
				margin: 6px 20px;
			}
			.top span {
				background-color: blue;
				border: 1px solid #CCC;
				color: #FFF;
				
			}
			.gg {
				margin: 20px 10px;
				padding: 10px 20px;
			}
		</style>
	</head>

	<body>
		<div class="container border">
			<div class=" top row bg-primary">
				<div class="input-group col-xs-10 col-lg-5">
					<input type="text" class="form-control " id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status" placeholder="Search Our Website & Products" >
					<span class="input-group-addon glyphicon glyphicon-search"></span>
				</div>
			</div>
			
			<br />
			<div class="row">
				<div class="col-md-4 ">
					<div class="gg bg-info">
						<h4> Sleek</h4>
						<p>Loren ipsum dolor sit amet,consecterur adipiscing elit.Aenean pharetra vanus maximus. Cras condimentum portitor enim a egestas.Suspendisse potenti</p>
						<button type="button" class="btn btn-primary">Read More</button>

					</div>
				</div>
				<div class="col-md-4 ">
					<div class="gg bg-info">
						<h4> Sleek</h4>
						<p>Loren ipsum dolor sit amet,consecterur adipiscing elit.Aenean pharetra vanus maximus. Cras condimentum portitor enim a egestas.Suspendisse potenti</p>
						<button type="button" class="btn btn-primary">Read More</button>

					</div>
				</div>
				<div class="col-md-4 ">
					<div class="gg bg-info">
						<h4> Sleek</h4>
						<p>Loren ipsum dolor sit amet,consecterur adipiscing elit.Aenean pharetra vanus maximus. Cras condimentum portitor enim a egestas.Suspendisse potenti</p>
						<button type="button" class="btn btn-primary">Read More</button>

					</div>
				</div>
			</div>
		</div>
	</body>

</html>